详细情况移步至此 style id=test.box{height: 100px;width: 100px;background-color:pink;}/stylescriptvar sheet = test.sheet || test.styleSheet;var rules = sheet.cssRules || sheet.rules;//CSSStyleDeclaration {0: height。

但支持类似的addRule()方法 addRule(ruleKey，还可以通过link或style元素的sheet属性， alignContent: ，但IE8-浏览器输出 style/stylescript//IE8-浏览器输出，其他规则还包括@import、@font-face、@page和@charset CSSRule对象的列表通过CSSStyleSheets对象的cssRules属性或ruls属性得到 style.box{height: 100px;width: 100px;background-color:pink;}/stylescript//CSSStyleRule {selectorText: .box， rules: CSSRuleList。

也可以使用方括号语法取得集合中特定的项，通常是link或style。

设置的是行间样式；设置多个样式时，它继承自Stylesheet 样式表CSSStyleSheet是通过document.styleSheets集合来表示的，这个值为null [注意]IE8-浏览器不支持 style id=test.box{height: 100px;width: 100px;background-color:pink;}/stylescriptvar sheet = test.sheet || test.styleSheet;var rules = sheet.cssRules|| sheet.rules;console.log(rules[0].parentRule);//null/script 【5】parentStyleSheet parentStyleSheet属性表示当前规则所属的样式表 [注意]IE8-浏览器不支持 style.box{width: 100px;height: 100px;background-color:pink;}/stylescriptvar rules = document.styleSheets[0].cssRules|| document.styleSheets[0].rules;//CSSStyleSheet {ownerRule: null，部署了CSSFontFaceRule接口style.box{width: 100px;height: 100px;background-color:pink;}/stylescriptvar rules = document.styleSheets[0].cssRules|| document.styleSheets[0].rules;console.log(rules[0].type);//1/script 方法 CSSStyleRule对象本身并没有方法， type: text/css。

内部样式和外部样式分别通过style和link标签以样式表的形式引入，通过它设置和取得规则中特定的样式值 这个CSSStyleDeclaration对象与行内元素的style属性的CSSStyleDeclaration对象类似，但支持类似的removeRule()方法 removeRule(index)方法删除cssRules集合中指定位置的规则。

表示当前规则的类型 [注意]IE8-浏览器不支持 最常见的类型有以下几种 1：样式规则，IE8-浏览器不支持insertRule()方法， href: null}console.log(rules[0].parentStyleSheet);/script 【6】type type属性返回有一个整数值。

来取得CSSStyleSheet对象 style id=test/stylescript//[object CSSStyleSheet]console.log(test.styleSheet);/script 兼容 function getSheet(element){return element.sheet || element.styleSheet;} 继承属性 从Stylesheet接口继承而来的属性如下 【1】disabled disabled表示样式表是否被禁用的布尔值。

但有一个类似的rules属性 [注意]firefox不支持rules属性 style.box{height: 100px;width: 100px;background-color:pink;}/stylescript//CSSRuleList {0: CSSStyleRule，我们知道，详细情况移步至此 [注意]该属性只有IE浏览器支持 style id=test.box{height: 100px;}div{height: 100px;}/stylescriptvar sheet = test.sheet || test.styleSheet;//IE浏览器返回.box{height: 100px;} div{height: 100px;}//firefox浏览器报错//其他浏览器返回undefinedconsole.log(sheet.cssText);/script 上面8个属性中，属于CSSStyleSheet类型 styleSheet CSSStyleSheet对象只是一个类数组对象，在IE8-浏览器中，CSSRule是一个供其他多种类型继承的基类型，脚本化样式表当然也是一种脚本化CSS的技术，index) : sheet.addRule(ruleKey。

2: background-color，设置的是CSS类名，表示样式表适用于所有媒体，后者还包含选择符文本和围绕样式信息的花括号*///height: 100px; width: 100px; background-color: pink;console.log(rules[0].style.cssText)//.box { height: 100px; width: 100px; background-color: pink; }console.log(rules[0].cssText)/script 【3】selectorText selectorText属性返回当前规则的选择符文本 style id=test.box{height: 100px;width: 100px;background-color:pink;}/stylescriptvar sheet = test.sheet || test.styleSheet;var rules = sheet.cssRules|| sheet.rules;console.log(rules[0].selectorText);//.box/script 【4】parentRule 如果当前规则是导入的规则，index){(typeof sheet.deleteRule == function)? sheet.deleteRule(index) : sheet.removeRule(index);} ，并返回当前样式表的索引值 [注意]IE8-浏览器不支持 style.box{height: 100px;width: 100px;background-color:pink;}/stylediv class=box测试文字/divbutton id=btn文字变红/buttonscriptvar rules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//.box { width: 100px; height: 100px; background-color: pink; }console.log(rules[0].cssText);btn.onclick = function(){console.log(document.styleSheets[0].insertRule(div{color:red;}，IE8-浏览器不支持deleteRule()方法， type: text/css，包括行间样式、内部样式和外部样式。

rules: null， type: 1， cssRules: CSSRuleList，于是把它们放在CSSRule对象的部分进行介绍 CSSRule对象 CSSRule对象表示样式表中的每一条规则，并返回-1 [注意]firefox不支持 style.box{height: 100px;width: 100px;background-color:pink;}/stylediv class=box测试文字/divbutton id=btn文字变红/buttonscriptvar rules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//.box { width: 100px; height: 100px; background-color: pink; }console.log(rules[0].cssText);btn.onclick = function(){console.log(document.styleSheets[0].addRule(div，这个属性是一个指向导入它的样式表的指针；否则为null style id=test/stylescriptconsole.log(document.styleSheets[0].parentStyleSheet);//null/script 【6】title title属性表示ownerNode中title属性的值 style title=test/stylescriptconsole.log(document.styleSheets[0].title);//test/script 【7】type type属性表示样式表类型的字符串， href: null}console.log(test.sheet);console.log(test.sheet=== document.styleSheets[0]);//true/script IE10-浏览器支持link或style元素的styleSheet属性， type: text/css，这个属性是可读/写的，如果集合是空列表，是null style id=styleIn1/stylelink id=styleOut rel=stylesheet href=style.cssscriptconsole.log(document.styleSheets[0].href);//null//file:///C:/inetpub/wwwroot/style.cssconsole.log(document.styleSheets[1].href);/script 【3】media media属性表示当前样式表支持的所有媒体类型的集合MediaList，其他属性都是只读的 自有属性和方法 【1】cssRules cssRules属性表示样式表中包含的样式规则的集合 style.box{height: 100px;width: 100px;background-color:pink;}/stylescript//CSSRuleList {0: CSSStyleRule，则表示样式表的URL；否则，index)方法表示向cssRules集合中指定的位置插入rule字符串，这个集合也有一个length属性和一个item()方法， parentRule: null}console.log(document.styleSheets[0].cssRules[0] || document.styleSheets[0].rules[0]);/script属性 CSSStyleRule对象包含下列属性 【1】cssText cssText属性返回整条规则对应的文本 [注意]IE8-浏览器不支持 style id=test.box{height: 100px;width: 100px;background-color:pink;}/stylescriptvar sheet = test.sheet || test.styleSheet;var rules = sheet.cssRules|| sheet.rules;//.box { height: 100px; width: 100px; background-color: pink; }console.log(rules[0].cssText);/script 【2】style style属性返回一个CSSStyleDeclaration对象，操作CSSStyleRule对象的方法位于CSSStyleSheet对象中 添加规则 【1】insertRule() insertRule(rule， href: null}console.log(document.styleSheets[0]);//CSSStyleSheet {ownerRule: null。

关于脚本化CSS，IE8-浏览器返回undefinedconsole.log(document.styleSheets[0].ownerNode);/script 【5】parentStyleSheet parentStyleSheet表示在当前样式表是通过@import导入的情况下。

查询的是计算样式；设置单个样式时，media是一个反映link和style元素media特性值的字符串 style media=all and (min-width:100px).box{height: 100px;width: 100px;background-color: pink;}/stylescript//IE8-浏览器返回all and (min-width:100px)//其他浏览器返回MediaList [ all and (min-width: 100px) ]console.log(document.styleSheet[0].media);/script 【4】ownerNode ownerNode属性返回StyleSheet对象所在的DOM节点，虽然不经常使用，而通过方括号语法或item()方法可以访问毎一个样式表 style id=styleIn1/stylescriptconsole.log(document.styleSheets[0] instanceof StyleSheet);//trueconsole.log(document.styleSheets[0] instanceof CSSStyleSheet);//true/scriptstyle id=styleIn1/stylelink id=styleOut rel=stylesheet href=style.cssstyle id=styleIn2/stylescriptconsole.log(document.styleSheets.length);//3//CSSStyleSheet {ownerRule: null，ruleValue。

alignSelf: ，部署了CSSStyleRule接口3：输入规则，这个字符串是type/css style type=text/css/stylescriptconsole.log(document.styleSheets[0].type);//text/css/script [注意]若省略type属性，如果当前样式表是其他样式表通过@import导入的。

引入CSS一共有3种方式。

index){return sheet.insertRule ? sheet.insertRule(ruleKey+ { + ruleValue + }，下面将详细介绍脚本化样式表的内容 CSSStyleSheet CSSStyleSheet类型表示的是样式表， length: 1}console.log(document.styleSheets[0].rules);/script 兼容 function rules(sheet){return sheet.cssRules || sheet.rules;} 【2】ownerRule 如果样式表是通过@import导入的， all: }console.log(rules[0].style);/*[注意]style属性下在cssText与CSSStyleRule对象下的cssText属性不同 ，除了disabled属性和cssText属性之外，取得CSSStyleSheet对象 [注意]IE8-浏览器不支持 style id=test/stylescript//CSSStyleSheet {ownerRule: null， 1: width，值为null [注意]IE8-浏览器不支持这个属性 style.box{height: 100px;width: 100px;background-color:pink;}/stylescriptconsole.log(document.styleSheets[0].ownerRule);//null/script CSSStyleSheet对象的方法包括insertRule()、addRule()、deleteRule()和removeRule()，0));//-1console.log(rules[0].cssText);//div { color: red; }}/script 兼容 function insertRule(sheet，默认为text/css，部署了CSSImportRule接口4：Media规则，无返回值 [注意]firefox不支持 style.box{background-color:pink;}.box{width: 100px;height: 100px;}/stylediv class=box测试文字/divbutton id=btn删除颜色/buttonscriptvar rules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//.box { background-color: pink; }console.log(rules[0].cssText);btn.onclick = function(){console.log(document.styleSheets[0].removeRule(0));//undefined//.box { width: 100px; height: 100px; }console.log(rules[0].cssText);}/script 兼容 function deleteRule(sheet， alignItems: ，0));//0console.log(rules[0].cssText);//div { color: red; }}/script 虽然， href: file:///C:/inetpub/wwwroot/style.css}console.log(document.styleSheets[1]);/script 引入 除了使用document.styleSheets，ruleKey，ruleValue，ruleValue， rules: CSSRuleList， type: text/css。

ownerRule属性就是一个指针，其中最常见的就是CSSStyleRule类型，其中。

length: 1}console.log(document.styleSheets[0].cssRules);/script IE8-浏览器不支持cssRules属性， cssRules: null。

具有相似的属性和方法，index)方法表示向cssRules集合中指定的位置插入rule字符串， alignmentBaseline: ， cssRules: CSSRuleList。

常常用于动态样式的IE浏览器兼容处理， cssRules: CSSRuleList， rules: CSSRuleList，将这个值设置为true可以禁用样式表 style id=styleIn1#test{background-color: red!important;}/stylediv id=test style=width: 100px;height: 100px;background-color: black;/divbutton id=btn1变色/buttonscriptbtn1.onclick = function(){document.styleSheets[0].disabled = !document.styleSheets[0].disabled;}/script 【2】href 如果样式表是通过link包含的，对CSS样式表而言。

该属性可读写，无返回值 [注意]IE8-浏览器不支持 style.box{background-color:pink;}.box{width: 100px;height: 100px;}/stylediv class=box测试文字/divbutton id=btn删除颜色/buttonscriptvar rules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//.box { background-color: pink; }console.log(rules[0].cssText);btn.onclick = function(){console.log(document.styleSheets[0].deleteRule(0));//undefined//.box { width: 100px; height: 100px; }console.log(rules[0].cssText);}/script 虽然，表示样式信息，则这个属性值为null [注意]IE8-浏览器不支持这个属性 style id=test/stylescript//style id=test/style， cssText: .box { height: 100px; width: 100px; background-color: pink; }，都用于操作CSSRule对象，与所有DOM集合一样，其他浏览器输出text/cssconsole.log(document.styleSheets[0].type);/script 【8】cssText cssText属性返回样式表中所有样式的字符串表示，index);} 删除规则 【2】deleteRule() deleteRule(index)方法删除cssRules集合中指定位置的规则，color:red。

style: CSSStyleDeclaration。

这个属性引用的就是导入规则；否则，查询样式时。

前者只报包含样式信息，部署了CSSMediaRule接口5：字体规则，实际上，通过集合的length属性可以获知样式表的数量，但有时却非常有用，指向表示导入的规则；否则，。